<template>
  <view class="dy-scroll-container">
    <dy-navbar title="表单form" />
    <scroll-view class="dy-scroll" scroll-y="">
      <dy-card padding="0">
        <dy-form
          slot="body"
          label-width="200"
          :model="form"
          title="基础用法"
          border
          error-type="toast"
        >
          <dy-form-item required label-width="300" prop="name" label="姓名">
            <dy-input v-model="form.name" />
          </dy-form-item>
          <dy-form-item required label-width="300" prop="age" label="年龄">
            <dy-input v-model="form.age" type="number" />
          </dy-form-item>
          <dy-form-item required label-width="300" prop="sex" label="性别">
            <dy-radio-group v-model="form.sex" shape="dot">
              <dy-radio name="male">男</dy-radio>
              <dy-radio name="female">女</dy-radio>
            </dy-radio-group>
          </dy-form-item>
          <dy-form-item required label-width="300" prop="notice" label="自动通知">
            <dy-switch v-model="form.notice" />
          </dy-form-item>
          <dy-form-item label="参与活动" prop="activity">
            <dy-checkbox-group v-model="form.activity" shape="text" active-mode="fill">
              <dy-checkbox name="1">活动1</dy-checkbox>
              <dy-checkbox name="2">活动2</dy-checkbox>
            </dy-checkbox-group>
          </dy-form-item>
          <dy-form-item prop="intro" label="自我介绍" wrap input-align="left">
            <dy-input v-model="form.intro" type="textarea" placeholder="请输入" />
          </dy-form-item>
        </dy-form>
      </dy-card>

      <dy-card padding="0">
        <dy-form slot="body" v-bind="form" title="表单标题：禁用" desc="表单描述" border disabled>
          <dy-form-item label="名称">
            <dy-input />
            <view slot="right">秒</view>
          </dy-form-item>
        </dy-form>
      </dy-card>

      <dy-card>
        <dy-section slot="title" padding="0" title="label参数设置" />
        <template slot="body">
          <view class="dy-mg-bottom-24">对齐方式</view>
          <dy-radio-group v-model="labelAlign" shape="dot">
            <dy-radio name="left">左对齐</dy-radio>
            <dy-radio name="center">居中对齐</dy-radio>
            <dy-radio name="right">右对齐</dy-radio>
          </dy-radio-group>
          <view class="dy-mg-tb-24">宽度</view>
          <dy-radio-group v-model="labelWidth" shape="dot">
            <dy-radio :name="120">宽度120</dy-radio>
            <dy-radio :name="200">宽度200</dy-radio>
            <dy-radio :name="300">宽度300</dy-radio>
          </dy-radio-group>

          <dy-form :model="form" :label-align="labelAlign" :label-width="labelWidth">
            <dy-form-item required prop="name" label="姓名">
              <dy-input v-model="form.name" />
            </dy-form-item>
            <dy-form-item required prop="age" label="手机号">
              <dy-input v-model="form.age" type="number" />
            </dy-form-item>
            <dy-form-item required prop="age" label="是否预约">
              <dy-switch v-model="form.notice" />
            </dy-form-item>
          </dy-form>
        </template>
      </dy-card>

      <dy-card padding="0">
        <template slot="body">
          <dy-form title="标签换行" v-bind="form1" wrap input-align="left">
            <dy-form-item required prop="name" label="姓名">
              <dy-input v-model="form1.name" />
            </dy-form-item>
            <dy-form-item required prop="age" label="手机号">
              <dy-input v-model="form1.age" type="number" />
            </dy-form-item>
            <dy-form-item required prop="age" label="是否预约">
              <dy-switch v-model="form1.notice" />
            </dy-form-item>
          </dy-form>
        </template>
      </dy-card>

      <dy-card padding="0">
        <template slot="body">
          <dy-form
            ref="form"
            title="表单校验"
            :model="form2"
            border
            error-type="message"
            :wrap="false"
            input-align="right"
          >
            <dy-form-item prop="name" label="姓名">
              <dy-input v-model="form2.name" />
            </dy-form-item>
            <dy-form-item prop="intro" label="简介" wrap input-align="left">
              <dy-input v-model="form2.intro" type="textarea" placeholder="请输入简介" />
            </dy-form-item>
            <dy-form-item>
              <dy-button type="primary" @click="handleSubmitForm">提交</dy-button>
              <dy-button type="secondary" @click="handleResetForm">重置</dy-button>
            </dy-form-item>
          </dy-form>
        </template>
      </dy-card>
      <dy-gap />
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'Input',
  data() {
    return {
      form: {
        name: '张三',
        intro: '',
        age: 12,
        sex: 'male'
      },
      form1: {
        name: '张三',
        intro: '',
        age: 12,
        sex: 'male'
      },
      form2: {
        name: '张三',
        intro: ''
      },
      labelAlign: 'left',
      labelWidth: 120,
      checkboxGroupMax: ['male'],
      stepper: 1
    }
  },
  onReady() {
    const rules = {
      name: [
        {
          required: true,
          message: '请输入姓名',
          // 可以单个或者同时写两个触发验证方式
          trigger: ['change', 'blur']
        }
      ],
      intro: [
        {
          required: true,
          message: '请输入简介',
          // 可以单个或者同时写两个触发验证方式
          trigger: ['change', 'blur']
        },
        {
          min: 5,
          message: '简介不能少于5个字',
          trigger: 'change'
        }
      ]
    }
    this.$refs.form.setRules(rules)
  },
  methods: {
    handleSubmitForm() {
      this.$refs.form.validation()
    },
    handleResetForm() {
      this.$refs.form.resetValidation()
    }
  }
}
</script>
